<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="indexType"><tiles:getAsString name="indexType" /></c:set>
<form action="<tiles:getAsString name="searchFormActionUrl" />" name="ksr-search-form" class="form" method="get">
<div class="search-boxes-wrapper sans-serif bold full-width position-rel">
		<input type="hidden" name="currentPage" value="1"/>
		<input type="hidden" name="docsPerPage" value="10"/>
		<input type="hidden" name="searchType" value=""/>
		<input type="hidden" name="indexType" value="${indexType}"/>
		<%--
		<input type="hidden" name="latitude" value=""/>
		<input type="hidden" name="longitude" value=""/>
		 --%>
		<div class="search-fields">
					<div class="search-field keyword pull-left padding-all">
						<div class="input-group full-width">
							<span class="input-group-addon input-label font-dark">Find:</span>
							<input type="text" name="keyword" tabindex="1" value="${searchParams.keyword}" placeholder="Keywords" class="form-control"  id="ksr-searchQuery">
							<span class="input-group-btn undo-button" style="display:none;">
								<button class="btn btn-default" type="button">x</button>
							</span>
						</div>
				</div>
				<div class="search-field location pull-left padding-all">
					<div class="input-group full-width">
						<span class="input-group-addon input-label font-dark">Near:</span>
						<input type="text" name="location" value="${searchParams.location}" placeholder="Location" class="form-control  place-autocomplete" tabindex="2" id="ksr-searchLocation"/>
						<span class="input-group-btn undo-button" style="display:none;">
							<button class="btn btn-default" type="button">x</button>
						</span>
						<span class="input-group-btn submit">
							<button class="btn <tiles:getAsString name="searchButtonCss"/> margin-left-half" type="submit"><i class="icon-search "></i></button>
						</span>						
					</div>
				</div>
		</div>
</div>
<div class="clearfix"></div>
<c:if test="${not empty searchParams}">
<div class="padding-all search-facet">
	<c:choose>
		<c:when test="${not empty searchParams.keyword and not empty searchParams.location}">
			<h1><b>${searchParams.keyword}</b> ${searchParams.location}</h1>
		</c:when>
		<c:when test="${not empty searchParams.keyword}">
			<h1><b>${searchParams.keyword}</b></h1>
		</c:when>
		<c:when test="${not empty searchParams.location}">
			<h1 class="bold">Browsing ${searchParams.location}</h1>
		</c:when>
		<c:otherwise>
			<div class="alert alert-warning">Please input keyword or location to narrow down your search results</div>
		</c:otherwise>
	</c:choose>
        <a data-toggle="collapse" href="#searchFilter" class="btn btn-success filters-display" ><span class="label-txt inline-block">Hide filters</span> <span class="caret"></span></a>
      <div id="searchFilter" class="filters row margin-top border-top collapse in">
      	<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      		<div class="padding-all">
		    	<div class="filter-title font-18 font-orange bold margin-bottom">Sort by</div>
		    	<div class="radiobox no-margin-all">
				    <label><input type="radio" name="sortType" value="RELEVANCE" <c:if test="${empty searchParams.sortType or searchParams.sortType eq 'RELEVANCE'}">checked</c:if> class="facet"> Best Match</label>
				 </div>
				 <c:if test="${indexType eq 'office'}">
			    	<div class="radiobox no-margin-all">
					    <label><input type="radio" name="sortType" value="HIGHEST_RATED" <c:if test="${searchParams.sortType eq 'HIGHEST_RATED'}">checked</c:if> class="facet"> Highest Rated</label>
					 </div>
			    	<div class="radiobox no-margin-all">
					    <label><input type="radio" name="sortType" value="MOST_REVIEWED" <c:if test="${searchParams.sortType eq 'MOST_REVIEWED'}">checked</c:if> class="facet"> Most Reviewed</label>
					 </div>
				 </c:if>
		    	<c:choose>
					<c:when test="${indexType eq 'office'}">
				    	<div class="radiobox no-margin-all">
						    <label><input type="radio" name="sortType" value="PRICE_ASC" <c:if test="${searchParams.sortType eq 'PRICE_ASC'}">checked</c:if> class="facet"> Price <i class="icon-sort-by-order icon-large font-orange"></i></label>
						 </div>
				    	<div class="radiobox no-margin-all">
						    <label><input type="radio" name="sortType" value="PRICE_DSC" <c:if test="${searchParams.sortType eq 'PRICE_DSC'}">checked</c:if> class="facet"> Price <i class="icon-sort-by-order-alt icon-large font-orange"></i></label>
						 </div>
					</c:when>
					<c:when test="${indexType eq 'customer'}">
				    	<div class="radiobox no-margin-all">
						    <label><input type="radio" name="sortType" value="AGE_ASC" <c:if test="${searchParams.sortType eq 'AGE_ASC'}">checked</c:if> class="facet"> Age <i class="icon-sort-by-order icon-large font-orange"></i></label>
						 </div>
				    	<div class="radiobox no-margin-all">
						    <label><input type="radio" name="sortType" value="AGE_DESC" <c:if test="${searchParams.sortType eq 'AGE_DESC'}">checked</c:if> class="facet"> Age <i class="icon-sort-by-order-alt icon-large font-orange"></i></label>
						 </div>
					</c:when>
				</c:choose>
			</div>
      	</div>
      	
      	<c:if test="${not empty searchResult.targetLocation and not empty searchResult.targetLocation.name and not empty searchResult.targetLocation.locationType}">
      			<c:set var="value" value="geoid=${searchResult.targetLocation.geoid}|name=${searchResult.targetLocation.name}|type=${searchResult.targetLocation.locationType}"/>
      			<c:if test="${not empty searchResult.targetLocation.state}">
	      			<c:set var="value" value="${value}|state=${searchResult.targetLocation.state}"/>
				</c:if>
      			<c:if test="${not empty searchResult.targetLocation.latitude and not empty searchResult.targetLocation.longitude}">
	      			<c:set var="value" value="${value}|lat=${searchResult.targetLocation.latitude}|lon=${searchResult.targetLocation.longitude}"/>
				</c:if>
		      	<input type="hidden" name="targetLocation" value="${value}"/>
		</c:if>
		<c:set var="displayedNeighbors" value="5"/>
		<c:if test="${not empty searchResult.locationFilter}">
	 		<c:set var="locationFilters" value="${searchResult.locationFilter}" scope="request"/>
	      	<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
	      		<div class="padding-all">
			    	<div class="filter-title font-18 font-orange bold margin-bottom">Neighbors</div>
		      		<c:if test="${not empty locationFilters}">
		      			<c:forEach items="${locationFilters}" var="location" varStatus="status" end="${displayedNeighbors-1}">
					    	<div class="location-filters checkbox no-margin-all">
							    <label><input type="checkbox" name="neighbors" value="geoid=${searchResult.targetLocation.geoid}|name=${location.name}|type=${location.locationType}<c:if test="${not empty location.state}">|state=${location.state}</c:if>" class="facet" label="${location.name}"
							    	<c:forEach items="${searchParams.neighbors}" var="neighbor">
							    			<c:if test="${neighbor.name eq location.name}">checked</c:if>
							    	</c:forEach>
							    > ${location.name}</label>
							 </div>
						</c:forEach>
					</c:if>
					<c:if test="${fn:length(locationFilters) gt displayedNeighbors}">
						 <a data-toggle="modal" href="#moreLocationsOverlay">More locations...</a>
						<%--more locations overlay --%>
						<div class="modal fade" id="moreLocationsOverlay" tabindex="-1" role="dialog" aria-labelledby="moreLocationsOverlayLabel" aria-hidden="true" class="position-abs">
						    <div class="modal-dialog">
						      <div class="modal-content">
						        <div class="modal-header">
						          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						          <h4 class="modal-title">More Locations</h4>
						        </div>
						        	<div class="modal-body">
						      			<c:forEach items="${locationFilters}" var="location" varStatus="status">
									    	<div class="location-filters checkbox no-margin-all">
											    <label><input type="checkbox" name="neighbors" value="geoid=${searchResult.targetLocation.geoid}|name=${location.name}|type=${location.locationType}<c:if test="${not empty location.state}">|state=${location.state}</c:if>" class="facet" label="${location.name}"
											    	<c:forEach items="${searchParams.neighbors}" var="neighbor">
											    			<c:if test="${neighbor.name eq location.name}">checked</c:if>
											    	</c:forEach>
											    > ${location.name}</label>
											 </div>
										</c:forEach>
						        </div><!-- /.modal-body -->
						      </div><!-- /.modal-content -->
						    </div><!-- /.modal-dialog -->
						  </div><!-- /.modal -->
					</c:if>
				</div>
	      	</div>
	      	
	      	
		</c:if>
		<c:if test="${not empty searchResult.targetLocation and empty searchResult.locationFilter}">
		<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2">
      		<div class="padding-all">
		    	<div class="filter-title font-18 font-orange bold margin-bottom">Distance</div>
		    	<div class="radiobox no-margin-all">
				    <label><input type="radio" name="distance" value="20" <c:if test="${empty searchParams.distance or searchParams.distance eq 20}">checked</c:if> class="facet"> Bird's-eye View</label>
				 </div>		    	
		    	<div class="radiobox no-margin-all">
				    <label><input type="radio" name="distance" value="5"  <c:if test="${searchParams.distance eq 5}">checked</c:if>  class="facet"> Driving (5 mi.)</label>
				 </div>		    	
		    	<div class="radiobox no-margin-all">
				    <label><input type="radio" name="distance" value="2" <c:if test="${searchParams.distance eq 2}">checked</c:if>   class="facet"> Biking (2 mi.)</label>
				 </div>		    	
		    	<div class="radiobox no-margin-all">
				    <label><input type="radio" name="distance" value="1"  <c:if test="${searchParams.distance eq 1}">checked</c:if>  class="facet"> Walking (1 mi.)</label>
				 </div>		    	
			</div>
      	</div>
      	</c:if>
      	
      	<%--for office search only--%>
      	<c:if test="${indexType eq 'office'}">

      	<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      		<div class="padding-all rating-filter">
		    	<div class="filter-title font-18 font-orange bold margin-bottom">Rating</div>
					    <label>
					    <input type="radio" name="ratingFilter" value="0"  class="facet" style="margin-top:2px" 
					    			<c:if test="${empty searchParams.ratingFilter or searchParams.ratingFilter eq 0}">
					    				checked
					    				<c:set var="iconClass" value="icon-star font-orange"/>
				    				</c:if>
					    /> 
						    <div class="font-14 inline-block margin-left-half">
							<span class=""><i class="icon-ban-circle"></i></span>
							</div>
		    	<c:forEach begin="0" end="4" varStatus="s">
					    </label>
			    	<div class="radiobox no-margin-all">
			    		<c:set var="iconClass" value="icon-star-empty"/>
					    <label>
					    <input type="radio" name="ratingFilter" value="${s.count*20}"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ratingFilter eq s.count*20}">
					    				checked
					    				<c:set var="iconClass" value="icon-star font-orange"/>
				    				</c:if>
					    /> 
						    <div class="font-14 inline-block margin-left-half">
						     <c:forEach begin="1" end="${s.count}">
								<i class="${iconClass}" style="margin-right:-3px;"></i>
							</c:forEach>
							<c:if test="${not s.last}">
								<i class="icon-level-up"></i>
								<%--
								<span class="margin-left-half font-13 font-normal">Up</span>
								 --%>
							</c:if>
							</div>
					    </label>
					  </div>
				</c:forEach>
			</div>
      	</div>    
      	  	
      	<div class="col-xs-6 col-sm-1 col-md-1 col-lg-1">
      		<div class="padding-all">
		    	<div class="filter-title font-18 font-orange bold margin-bottom">Price</div>
		    	<c:forEach begin="0" end="3" varStatus="s">
			    	<div class="checkbox no-margin-all">
					    <label><input type="checkbox" name="priceFilters" value="${s.count}"  class="facet"
			    			<c:forEach items="${searchParams.priceFilters}" var="priceFilter" >
					    			<c:if test="${priceFilter eq s.count}">checked</c:if>
					    	</c:forEach>
					    > <c:forEach begin="1" end="${s.count}">$</c:forEach></label>
					  </div>
		    	</c:forEach>
			</div>
      	</div>
      	</c:if>
      	<%--for customer search only--%>
      	<c:if test="${indexType eq 'customer'}">

      	<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      		<div class="padding-all rating-filter">
		    	<div class="filter-title font-18 font-orange bold margin-bottom">Age Range</div>
				    <div>
					    <input type="radio" name="ageFilter" value="0"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom eq 0 and searchParams.ageFilterTo eq 0}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class=""><i class="icon-ban-circle"></i></span>
						</div>
				    </div>
				    <div>
					    <input type="radio" name="ageFilter" value="1-3"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom ge 12 and searchParams.ageFilterTo lt 48}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class="">1 - 3 yo</span>
						</div>
				    </div>
				    <div>
					    <input type="radio" name="ageFilter" value="4-6"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom ge 48 and searchParams.ageFilterTo lt 84}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class="">4 - 6 yo</span>
						</div>
				    </div>
				    <div>
					    <input type="radio" name="ageFilter" value="7-10"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom ge 84 and searchParams.ageFilterTo lt 132}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class="">7- 10 yo</span>
						</div>
				    </div>
				    <div>
					    <input type="radio" name="ageFilter" value="11-14"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom ge 132 and searchParams.ageFilterTo lt 180}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class="">11 - 14 yo</span>
						</div>
				    </div>
				    <div>
					    <input type="radio" name="ageFilter" value="15-"  class="facet" style="margin-top:2px" 
					    			<c:if test="${searchParams.ageFilterFrom ge 180}">
					    				checked
				    				</c:if>
					    /> 
					    <div class="font-14 inline-block margin-left-half">
						<span class="">15 yo or over</span>
						</div>
				    </div>
				</div>
      	</div>    
      	</c:if>
      </div>
</div>
</c:if>
</form>


